<script setup>
import { ref, onMounted } from 'vue'

const userInfo = ref({
  name: '',
  age: '',
  gender: '男',
  height: '',
  weight: '',
  bloodPressure: {
    systolic: '',
    diastolic: ''
  },
  medicalHistory: ''
})

const accountType = ref('personal')
const genderOptions = ['男', '女']

onMounted(() => {
  // 获取登录用户信息
  const storedUserInfo = uni.getStorageSync('userInfo')
  if (storedUserInfo) {
    // 如果有真实姓名等信息，则填充表单
    if (storedUserInfo.fullName) {
      userInfo.value.name = storedUserInfo.fullName
    }
    if (storedUserInfo.phoneNumber) {
      userInfo.value.phone = storedUserInfo.phoneNumber
    }
    if (storedUserInfo.accountType) {
      accountType.value = storedUserInfo.accountType
    }
  }
})

function saveUserInfo() {
  uni.showToast({
    title: '保存成功',
    icon: 'success'
  })
  // 实际项目中这里会有保存到本地或云端的逻辑
}



function goToFamilyMembers() {
  uni.navigateTo({
    url: '/pages/basic-info/family-members'
  })
}
</script>

<template>
  <view class="container">
    <view class="header">
      <view class="title">基本信息</view>
      <view class="subtitle">记录您的基本健康信息</view>
    </view>
    
    <view class="form-container">
      <view class="form-item">
        <text class="label">姓名</text>
        <input class="input" v-model="userInfo.name" placeholder="请输入姓名" />
      </view>
      
      <view class="form-item">
        <text class="label">年龄</text>
        <input class="input" v-model="userInfo.age" type="number" placeholder="请输入年龄" />
      </view>
      
      <view class="form-item">
        <text class="label">性别</text>
        <view class="radio-group">
          <view 
            v-for="(item, index) in genderOptions" 
            :key="index"
            class="radio-item"
            :class="{ 'radio-active': userInfo.gender === item }"
            @click="userInfo.gender = item"
          >
            <text>{{ item }}</text>
          </view>
        </view>
      </view>
      
      <view class="form-item">
        <text class="label">身高 (cm)</text>
        <input class="input" v-model="userInfo.height" type="number" placeholder="请输入身高" />
      </view>
      
      <view class="form-item">
        <text class="label">体重 (kg)</text>
        <input class="input" v-model="userInfo.weight" type="number" placeholder="请输入体重" />
      </view>
      
      <view class="form-item">
        <text class="label">血压 (mmHg)</text>
        <view class="blood-pressure-inputs">
          <input class="input bp-input" v-model="userInfo.bloodPressure.systolic" type="number" placeholder="收缩压" />
          <text class="bp-separator">/</text>
          <input class="input bp-input" v-model="userInfo.bloodPressure.diastolic" type="number" placeholder="舒张压" />
        </view>
      </view>
      
      <view class="form-item">
        <text class="label">既往病史</text>
        <textarea class="textarea" v-model="userInfo.medicalHistory" placeholder="请输入既往病史（选填）" />
      </view>
    </view>
    
    <button class="save-btn" @click="saveUserInfo">保存信息</button>
    
    <button 
      v-if="accountType === 'family'" 
      class="family-btn" 
      @click="goToFamilyMembers"
    >
      管理家庭成员
    </button>
  </view>
</template>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.header {
  margin-bottom: 40rpx;
  
  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .subtitle {
    font-size: 28rpx;
    color: #666;
  }
}

.form-container {
  background-color: #fff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 40rpx;
}

.form-item {
  margin-bottom: 30rpx;
  
  .label {
    display: block;
    font-size: 28rpx;
    color: #333;
    margin-bottom: 15rpx;
  }
  
  .input {
    width: 100%;
    height: 80rpx;
    border: 1px solid #ddd;
    border-radius: 8rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    box-sizing: border-box;
  }
  
  .textarea {
    width: 100%;
    height: 200rpx;
    border: 1px solid #ddd;
    border-radius: 8rpx;
    padding: 20rpx;
    font-size: 28rpx;
    box-sizing: border-box;
  }
  
  .radio-group {
    display: flex;
    
    .radio-item {
      padding: 15rpx 40rpx;
      border: 1px solid #ddd;
      border-radius: 8rpx;
      margin-right: 20rpx;
      font-size: 28rpx;
      
      &.radio-active {
        background-color: #e6f7ff;
        border-color: #1890ff;
        color: #1890ff;
      }
    }
  }
  
  .blood-pressure-inputs {
    display: flex;
    align-items: center;
    
    .bp-input {
      flex: 1;
      width: 45%;
    }
    
    .bp-separator {
      margin: 0 20rpx;
      font-size: 32rpx;
      color: #333;
    }
  }
}

.save-btn {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  background-color: #1890ff;
  color: #fff;
  font-size: 32rpx;
  border-radius: 45rpx;
  margin-bottom: 20rpx;
}



.family-btn {
  background-color: #fff;
  color: #1890ff;
  border: 1px solid #1890ff;
  border-radius: 8rpx;
  font-size: 30rpx;
  padding: 20rpx 0;
}
</style>